<template>
  <a-form layout="vertical">
    <a-form-item
      v-for="fd in props.fields"
      :key="fd.id"
      :label="fd.label"
      :required="fd.required"
      :disabled="state.roFields.findIndex((x) => x == fd.id) > -1"
    >
      <template #help>
        <span v-if="fd.inputHint">{{ fd.inputHint }}</span>
        <span v-if="fd.unitLabel">{{ $t("335") + ":" + fd.unitLabel }}</span>
      </template>
      <multi-field-editor
        v-if="fd.multi"
        ref="refMfe"
        :field="fd"
        :codeSourceMap="codeSourceMap"
        :record="state.record"
        style="width: 95%"
      ></multi-field-editor>
      <div v-else>
        <a-input-number
          v-if="fd.fieldType.T == 'FtInt' || fd.fieldType.T == 'FtFloat'"
          v-model:value="fd.value"
          :disabled="state.roFields.findIndex((x) => x == fd.id) > -1"
          style="width: 95%"
        />
        <a-switch
          v-else-if="fd.fieldType.T == 'FtBool'"
          v-model:checked="fd.value"
          :disabled="state.roFields.findIndex((x) => x == fd.id) > -1"
        ></a-switch>
        <a-date-picker
          v-else-if="fd.fieldType.T == 'FtDate'"
          v-model:value="fd.value"
          valueFormat="YYYY-MM-DD"
          :locale="locale"
          :disabled="state.roFields.findIndex((x) => x == fd.id) > -1"
        ></a-date-picker>
        <a-time-picker
          v-else-if="fd.fieldType.T == 'FtTime'"
          v-model:value="fd.value"
          valueFormat="HH:mm:ss"
        ></a-time-picker>
        <a-date-picker
          v-else-if="fd.fieldType.T == 'FtDateTime'"
          v-model:value="fd.value"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          showTime
          showNow
          :locale="locale"
        ></a-date-picker>
        <FileUploader v-else-if="fd.fieldType.T == 'FtFile'" :field="fd">
        </FileUploader>
        <a-select
          v-else-if="fd.fieldType.T == 'FtCode'"
          v-model:value="fd.value"
          :options="codeSourceMap[fd.id]"
          :field-names="{ label: 'l', value: 'c' }"
          style="width: 95%"
        >
        </a-select>
        <a-select
          v-else-if="fd.fieldType.T == 'FtUserId'"
          v-model:value="fd.value"
          :placeholder="$t('128')"
          style="width: 95%"
        >
          <a-select-option :value="uid">{{ $t("236") }}</a-select-option>
          <a-select-option
            v-for="item in appStore.otherUsers"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <div v-else-if="fd.fieldType.T == 'FtJson'">
          <JsonEditor v-model="fd.value" :canEdit="true"></JsonEditor>
        </div>
        <div v-else-if="fd.fieldType.T == 'FtYaml'">
          <YamlEditor v-model="fd.value" :canEdit="true"></YamlEditor>
        </div>
        <a-textarea
          v-else-if="
            fd.fieldType.T != 'FtComputed' &&
            fd.fieldType.T != 'FtAutoIncreaseInt' &&
            fd.fieldType.T != 'FtAutoIncreaseIntGlobal'
          "
          v-model:value="fd.value"
          auto-size
          :showCount="true"
          style="width: 95%"
        />
        <label v-else>自动计算，无需填报</label>
      </div>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="doSaveRecord">{{ $t("224") }}</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive, ref } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { computed } from "@vue/reactivity";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import FileUploader from "@/component/field/FileUploader.vue";
import MultiFieldEditor from "@/component/field/MultiFieldEditor.vue";
import JsonEditor from "@/component/field/JsonEditor.vue";
import YamlEditor from "@/component/field/YamlEditor.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const appStore = CommonDefine.appStore();
const channel = CommonDefine.channel();
const state = reactive({
  roFields: [], // 不可修改的字段id列表
});
const props = defineProps({
  shareMode: { type: Boolean, default: false },
  modelId: { type: Number, default: 0 },
  fields: { type: Array, default: undefined },
});
const refMfe = ref([]);
const uid = computed(() => Number(localStorage.getItem("uid")));

const doSaveRecord = () => {
  let pd = { modelId: props.modelId, fields: [] };
  props.fields.forEach((x) => {
    let fieldValue = {
      fieldId: x.id,
      value: x.value,
    };
    if (x.fieldType.T == "FtFile") {
      if (CommonDefine.useful(channel.uploadData)) {
        channel.uploadData.forEach((y) => {
          if (y.fid == x.id) {
            if (!CommonDefine.useful(fieldValue.value)) {
              fieldValue.value = {};
            }
            fieldValue.value.v = y.v;
            fieldValue.value.d = y.d;
          }
        });
      }
    }
    // 多值字段赋值
    if (x.multi) {
      refMfe.value.forEach((componentRef) => {
        let fv = componentRef.getValue();
        if (fv && fv.fid == x.id) {
          fieldValue.value = fv.value;
        }
      });
    }
    pd.fields.push(fieldValue);
  });
  let url = props.shareMode
    ? `/api/v1/record/share-save`
    : `/api/v1/record/save`;
  CommonDefine.apiPostArm(url, pd, (d) => {
    CommonDefine.alert(t("375"));
    // 清理界面
    props.fields.forEach((item) => {
      delete item["value"];
      delete item["display"];
    });
    refMfe.value.forEach((componentRef) => {
      componentRef.resetValue();
    });
  });
};

// 所有801类型字段的码表
const codeSourceMap = computed(() => {
  var r = {};
  props.fields.forEach((fd) => {
    if (fd.fieldType.T == "FtCode") {
      r[fd.id] = JSON.parse(fd.fieldType.C);
    }
  });
  return r;
});
</script>
